const $ = (selector)=> document.querySelector(selector);
const setCss = (elm,style,val) => elm.style.setProperty(style,val);

const totleTime = $('.treat-title');
const currentTime = $('.time');
const player = $('.pause');
const icon = $(".pause i");
const _player = $('.circle1');

const audio = $('#audio');
let duration,timer;
player.onclick = ()=>{
    duration = duration || audio.duration;
    totleTime.innerHTML = formatTime(duration);
    audio.paused ? audio.play() : audio.pause();
 
    audio.addEventListener('play',()=>{
        icon.className = 'iconfont icon-ziyuan';
        timer = setInterval(playing,1000);
    });
    audio.addEventListener('pause',()=>{
        icon.className = "iconfont icon-icon_play";
        clearInterval(timer);
    });
}

function playing(){
    let current = audio.currentTime;
    currentTime.innerHTML = formatTime(current);
    
    let rate = current / duration;   
    setCss(_player,"--player",rate * 100 + "%");
   
}

function formatTime(time){
    time = time | 0;
    let min  = (time /60 | 0) %60;
    let second = time%60;
    return  toTow(min) + ':' + toTow(second) ;
    function toTow(t){
        let s = t + '';
        if(t<10) s = '0' + t;
        return s;
    }
}




const volthumb = $('.thumb');
const _vol = $('.slider-outer');


volthumb.onmousedown = (e)=>{
    let downX = e.pageX;
    let downL = volthumb.offsetLeft;
    document.onmousemove = function(e){
        let scale = (e.pageX + 14 - downX + downL) / volthumb.parentNode.offsetWidth;
        if(scale<0){
            scale  = 0;
        }else if(scale>1){
            scale = 1;
        }
        setCss(_vol,"--vol-num",scale * 280  + "px");
        audio.volume = scale;
    }
    
}
document.onmouseup = ()=>{
    document.onmousemove = null;
}












